<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/case/list' }">社保方案</el-breadcrumb-item>
        <el-breadcrumb-item>添加</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer addCasePage">
      <!-- 添加社保方案表单 -->
      <div class="customform shebaoform">
        <el-form
          :inline="true"
          :model="product"
          :rules="rules"
          label-width="120px"
          label-position="left"
          ref="socialproduct"
        >
          <div class="el-form--inline">
            <el-form-item label="参保地" prop="addrId">
              <el-select
                placeholder="请输入字母搜索"
                @change="addrChange"
                v-model="product.addrId"
                filterable
              >
                <el-option
                  v-for="item in addrs"
                  :key="item.id"
                  :label="item.addrName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司名称">
              <company-select :p_value.sync="product.optrCompId"></company-select>
            </el-form-item>
            <el-form-item label="社保账户" prop="accountId">
              <el-select placeholder="请选择社保账户" v-model="product.accountId" filterable>
                <el-option
                  v-for="item in accounts"
                  :key="item.id"
                  :label="item.account"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="方案名称" prop="productName">
              <el-input v-model="product.productName" placeholder="输入方案名称"></el-input>
            </el-form-item>
            <el-form-item label="户口性质" prop="hukouTypeCodeArr">
              <el-checkbox-group v-model="product.hukouTypeCodeArr">
                <el-checkbox
                  :label="item.dictCode"
                  v-for="(item,index) in types"
                  :key="index"
                >{{item.dictName}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="总合计精确度">
              <DataDictSelect :data-key="40001" :p_value.sync="product.calAccuCode"></DataDictSelect>
            </el-form-item>
            <el-form-item label="单位精确度">
              <DataDictSelect :data-key="40001" :p_value.sync="product.compCalAccuCode"></DataDictSelect>
            </el-form-item>
            <el-form-item label="个人精确度">
              <DataDictSelect :data-key="40001" :p_value.sync="product.empCalAccuCode"></DataDictSelect>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="生效年月" prop="startDate">
              <el-date-picker
                v-model="product.startDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
              <el-input class="long-input" v-model="product.comment" placeholder maxlength="255" show-word-limit></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 添加社保方案表单结束 -->
      <div class="page-form-btn">
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="saveProduct">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import CompanySelect from "../../components/CompanySelect";
import DataDictSelect from "../../components/DataDictSelect";

export default {
  name: "addCase",
  components: {
    CompanySelect,
    DataDictSelect
  },
  computed: {
    optrCompId() {
      return this.product.optrCompId;
    }
  },
  watch: {
    optrCompId(v1) {
      Http.api.get("company/" + v1 + "/account").then(res => {
        this.accounts = res.data;
      });
    }
  },
  data() {
    return {
      // 社保表单
      accounts: [],
      types: [],
      product: {
        optrCompId: "",
        accountId: "",
        addrId: "",
        addrName: "",
        optrCompName: "",
        productName: "",
        hukouTypeCode: "",
        hukouTypeCodeArr: [],
        calAccuCode: "",
        compCalAccuCode: "",
        empCalAccuCode: "",
        startDate: "",
        endDate: "",
        comment: ""
      },
      // 必填项目
      rules: {
        addrId: [
          { required: true, message: "请选择参保地", trigger: "change" }
        ],
        optrCompId: [
          { required: true, message: "请选择服务公司", trigger: "change" }
        ],
        accountId: [
          { required: true, message: "请选择社保账户", trigger: "change" }
        ],
        productName: [
          { required: true, message: "请输入方案名称", trigger: "blur" },
          { max: 255, message: "不能超过255个字符", trigger: "blur" }
        ],
        hukouTypeCodeArr: [
          {
            type: "array",
            required: true,
            message: "请选择一个户口性质",
            trigger: "change"
          }
        ],
        startDate: [
          {
            type: "string",
            required: true,
            message: "请选择生效年月",
            trigger: "change"
          }
        ]
      },
      // 参保地
      addrs: []
    };
  },
  created() {
    this.getAllAddrs();
    this.getType();
  },
  methods: {
    getType() {
      Http.api.get("dict", { params: { key: 40005 } }).then(res => {
        this.types = res.data;
      });
    },
    getAllAddrs() {
      Http.api.get("/addr/allPermission",{params:{permissionType:0}}).then(res => {
        this.addrs = res.data;
      });
    },
    test: function() {
      Http.api.get("/serverstatus").then(res => {});
    },
    indexMethod(index) {
      return index + 1;
    },
    // 保存
    saveProduct() {
      this.$refs["socialproduct"].validate(v => {
        console.log(this.product);
        if (v) {
          this.product.hukouTypeCode = this.product.hukouTypeCodeArr.join(",");
          Http.api.post("case/social/product", this.product).then(res => {
            console.log(res);
            this.$router.push({
              path: "/case/list",
              query: { productId: res.data.id }
            });
          });
        }
      });
    },
    addrChange(v) {
      console.log(v);
      this.product.addrName = v.addrName;
    },
    //编辑险种
    editInsurance() {
      this.$router.push({ path: "/case/editInsurance" });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
